<template>
  <!-- 头部查询区域 -->
  <el-header class="el-header">
    <div class="left-panel">
      <el-button type="warning" plain @click="getExportData">导出</el-button>
    </div>
    <div class="right-panel">
      <div class="right-panel-search">
        <div class="mt-4">
            <el-input
              v-model="queryInfo.query"
              placeholder="查询内容"
              class="input-with-select"
			  clearable
			  @clear="allData"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="姓名" />
                  <el-option label="年龄" value="年龄" />
                  <el-option label="身份证号" value="身份证号" />
                  <el-option label="派出所负责人" value="派出所负责人" />
                  <el-option label="镇武装部负责人" value="镇武装部负责人" />

                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
				  @click="searchPeople"
                ></el-button>
              </template>
            </el-input>
          </div>
      </div>
    </div>
  </el-header>
  <!-- 两个按钮 -->

    <Button :columns="state.columns"></Button>

  <!-- 数据表单 -->
  <el-table
    ref="tableRef"
    :data="state.nowAllList"
    stripe
    :header-cell-style="{ color: '#666', 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    :fit="true"
    style="width: 100%; font-size: 14px"
    ooltip-effect="dark"
  >
    <el-table-column prop="name" label="姓名" v-if="state.columns[0].show" />
    <el-table-column
      label="身份证号"
      prop="idCard"
      v-if="state.columns[1].show"
      width="175px"
    />
    <el-table-column
      label="年龄"
      prop="age"
      v-if="state.columns[2].show"
      sortable="true"
    />
    <el-table-column
      label="文化程度"
      prop="cultureStandard"
      v-if="state.columns[3].show"
    />
    <el-table-column
      label="派出所负责人"
      prop="policeStationOfficer"
      v-if="state.columns[4].show"
    />
    <el-table-column
      label="镇武装部负责人"
      prop="armedForcesOfficer"
      v-if="state.columns[5].show"
    />
    <el-table-column
      label="待审状态"
      prop="poliCarefulState"
      v-if="state.columns[6].show"
    />
    <el-table-column fixed="right" label="操作" width="120">
      <template v-slot="scope">
        <!-- <el-popconfirm
          confirm-button-text="政审通过"
          cancel-button-text="政审不通过"
          icon-color="#626AEF"
          title="是否通过政审?"
          @confirm="confirmEvent(scope.row)"
          @cancel="cancelEvent(scope.row)"
        >
          <template #reference>
            <el-button type="text" size="small" >政审</el-button>
          </template>
        </el-popconfirm> -->
        <el-button
          type="text"
          size="small"
          @click="judgeDetailBtn(scope.row)"
          style="color: orange"
          >政审详细</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区开始 -->
  <div class="page">
    <el-pagination
      v-model:currentPage="queryInfo.pagenum"
      v-model:page-size="queryInfo.pagesize"
      :page-sizes="[10, 20,25,30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 政审详细对话框 -->
  <el-dialog v-model="isShowJudge" title="政审详细" width="50%">
    <div class="policalAll">
      <!-- 个人犯罪记录 -->
      <div class="pepole">
        <div class="title">个人犯罪记录</div>
        <div class="seletion">
          <div>1.是否有过抢劫行为</div>
          <el-radio-group v-model="judgeDetail.isPersonRobbery">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <div>2.是否吸过毒</div>
          <el-radio-group v-model="judgeDetail.isPersonDrug">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <br />
          <span>结论：</span>
          <el-radio-group v-model="judgeDetail.isPersonPass">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 家庭犯罪记录 -->
      <div class="family">
        <div class="title">家属犯罪记录</div>
        <div class="seletion">
          <div>1.家属是否有过犯罪行为</div>
          <el-radio-group v-model="judgeDetail.isFramilyCrime">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>

          <div>2.家属与邻居是否和睦</div>
          <el-radio-group v-model="judgeDetail.isGoodNeighbor">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <br />
          <span>结论：</span>
          <el-radio-group v-model="judgeDetail.isFramilyPass">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 办公室结论 -->
      <div class="results">
        <div class="title">县（市、区）人民政府征兵办公室政治考核结论</div>
        <div class="seletion">
          <span>结论：</span>
          <el-radio-group v-model="judgeDetail.isGovernmentPass">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShowJudge = false" type="warning" plain
          >取消</el-button
        >
        <el-popconfirm
          confirm-button-text="政审通过"
          cancel-button-text="政审不通过"
          icon-color="#626AEF"
          title="是否通过政审?"
          @confirm="confirmEvent"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button @click="judgeKey" type="primary" plain>政审</el-button>
          </template>
        </el-popconfirm>
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import {
  getAllData,
  deriveData,
  searchData,
  judgeRes,
  judgeDetailDiag,
} from "@/api/politics/duringPolitics";
import { ElMessage } from "element-plus";
import Button from "@/components/commom/Button";
import { reactive, ref, onMounted,watch } from "vue";
let isShowJudge = ref(false);
let selectField = ref('')
// 获取数据渲染页面
const allData = async function () {
  const getAllDataRes = await getAllData.get();
  console.log(getAllDataRes);
  state.allList = getAllDataRes.data;
  queryInfo.total = getAllDataRes.data.length;
  getPageData();
};
// 实现分页效果
const getPageData = function () {
  let start = (queryInfo.pagenum - 1) * queryInfo.pagesize;
  let end = start + queryInfo.pagesize;
  state.nowAllList = state.allList.slice(start, end);
};

// 分页存储改变大小触发该事件
const handleSizeChange = function (newSize) {
  queryInfo.pagesize = newSize;
  allData();
};

// 分页发生变化触发该事件
const handleCurrentChange = function (newPage) {
  queryInfo.pagenum = newPage;
  allData();
};
// 导出数据功能
const getExportData = async function () {
  window.location.href = await deriveData.url;
};
// 根据姓名查找功能
const searchPeople = async function () {
	 if (!queryInfo.query) {
    allData();
    return;
  }
  const search = await searchData.post(`?name=${queryInfo.query}`);
  if (queryInfo.query) {
    console.log(search);
    console.log(search.data);
    state.nowAllList = search.data;
    ElMessage({
      message: search.msg,
      type: "success",
    });
  }
  if (!search.data) {
    ElMessage({
      message: search.msg,
      type: "error",
    });
    allData();
  }
};
// 判断政审结果
// 政审通过
const confirmEvent = async function () {
  judgeRes.url =
    judgeRes.url +
    `?poliCheckResults=政审通过&poliInfoId=${judgeDetail.poliInfoId}`;
  const judgeResult = await judgeRes.post();
  console.log(judgeRes.url);
  console.log(judgeResult);
  if (judgeResult.code == 200) {
    ElMessage({
      message: judgeResult.msg,
      type: "success",
    });
    allData();
  }
  isShowJudge.value = false;
};
// 政审不通过
const cancelEvent = async function () {
  judgeRes.url =
    judgeRes.url +
    `?poliCheckResults=政审不通过&poliInfoId=${judgeDetail.poliInfoId}`;
  const judgeResult = await judgeRes.post();
  console.log(judgeRes.url);
  console.log(judgeResult);
  if (judgeResult.code == 200) {
    ElMessage({
      message: judgeResult.msg,
      type: "success",
    });
  }
  isShowJudge.value = false;
};
// 政审详情按钮
const judgeDetailBtn = function (val) {
  isShowJudge.value = true;
  judgeDetail.poliInfoId = val.poliInfoId;
  console.log(judgeDetail.poliInfoId);
};
// 政审详情对话框
const judgeKey = async function () {
  judgeDetailDiag.body = {
    ...judgeDetail,
  };
  console.log( judgeDetailDiag.body);
  const judgeKeyRes = await judgeDetailDiag.post();
  console.log(judgeKeyRes);
};
const state = reactive({
  columns: [
    { name: "姓名:", show: true, prop: "name" },
    { name: "身份证号", show: true, prop: "idCard" },
    { name: "年龄", show: true, prop: "age", sortable: true },
    { name: "文化程度", show: true, prop: "cultureStandard" },
    { name: "派出所负责人", show: true, prop: "policeStationOfficer" },
    { name: "镇武装部负责人", show: true, prop: "armedForcesOfficer" },
    { name: "政审状态", show: true, prop: "poliCarefulState" },
  ],
  // 全部数据
  allList: [],
  // 页面显示的数据
  nowAllList: [],
});
// 接收政审详情的数据
const judgeDetail = reactive({
  isFramilyCrime: null,
  isFramilyPass: null,
  isGovernmentPass: null,
  isPersonDrug: null,
  isPersonPass: null,
  isPersonRobbery: null,
  poliInfoId: "",
});
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  //当前页数
  pagenum: 1,
  //当前每页显示多少条数据
  pagesize: 10,
  // 总数
  total: 0,
});
onMounted(() => {
  allData();
});
watch(queryInfo, (queryInfo) => {
  if (queryInfo.query === "") {
    searchPeople();
  }
});
</script>

<style scoped>
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.right-panle {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  width: 720px;
}
.btn1 {
  margin-left: 20px;
}

.el-table {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 10px;
}
.allbtn {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 5px;
}
.el-descriptions-item {
  margin-bottom: 1000px;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.checkboxCss {
  display: flex;
  flex-direction: column;
}
/* 政审详情对话框 */
.policalAll {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-left: 2px solid black;
  border-right: 2px solid black;
}
.pepole,
.family {
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid black;
}
.results {
  align-items: center;
  height: 100%;
  display: flex;
}
.title {
  text-align: center;
  padding-top: 50px;
  height: 100%;
  flex: 1;
  border-right: 2px solid black;
}
.seletion {
  flex: 2;
  padding-left: 10px;
  padding-top: 5px;
}
.btnModel {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 30px;
  /* margin-right: 5px; */
}
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.right-panle {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  width: 720px;
}
.btn1 {
  margin-left: 20px;
}
.el-header {
	display: flex;
	justify-content: space-between;
}
</style>
